﻿<!--
подробно: http://ruseller.com/lessons.php?rub=32&id=238
padding - отступ контента (фотографий) от краев окна. ;
imageScale - принимает значение true - контент(изображения) масштабируется по размеру окна, или false - окно вытягивается по размеру контента. По умолчанию - true;
zoomOpacity - изменение прозрачности контента во время анимации (по умолчанию false). Помним, что прозрачность задается от 0 до 1;
zoomSpeedIn - скорость анимации в мс при увеличении фото (по умолчанию 0);
zoomSpeedOut - скорость анимации в мс при уменьшении фото (по умолчанию 0) ;
zoomSpeedChange - скорость анимации в мс при смене фото (по умолчанию 0);
frameWidth - ширина окна, px (425px - по умолчанию);
frameHeight - высота окна, px(355px - по умолчанию);
overlayShow - (по умолчанию true) если true, то затенят страницу под всплывающим окном. Цвет задается в jquery.fancybox.css - div#fancy_overlay
overlayOpacity - Прозрачность затенения (0.3 по умолчанию);
hideOnContentClick - Если true закрывает окно по клику по любой его точке (кроме элементов навигации). По умолчанию true;
centerOnScroll - Если true, то окно центрируется на экране, когда пользователь прокручивает страницу.
-->

<head>

<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css" media="screen" />
<script type="text/javascript" src="fancybox/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.2.1.pack.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $("a.gallery").fancybox(
	{						
          "padding" : 5,
          "imageScale" : false, 
			"zoomOpacity" : false,
			"zoomSpeedIn" : 1000,	
			"zoomSpeedOut" : 1000,	
			"zoomSpeedChange" : 1000, 
			"frameWidth" : 700,	 
			"frameHeight" : 600, 
			"overlayShow" : true, 
			"overlayOpacity" : 0.8,	
			"hideOnContentClick" :false,
			"centerOnScroll" : false
				
			}
	
	);
});
</script>
</head>
<body>
<div id="wrap">
<a class="gallery" href="content.html">Клик</a>
<a class="gallery" href="images/1_b.jpg">pic</a>

<a class="gallery" rel="group" title="это фото 1" href="images/2_b.jpg"><img src="images/2_s.jpg" /></a>
 <a class="gallery" rel="group" title="это фото 2" href="images/3_b.jpg"><img src="images/3_s.jpg" /></a>
 <a class="gallery" rel="group" href="images/4_b.jpg"><img src="images/4_s.jpg" /></a>
</div>
</body>
